import React, { useState } from 'react';
import ProfileContent from './ProfilePage/ProfilePage';
import GroupsContent from './GroupsPage/GroupsPage';
import MaterialsContent from './MaterialsPage/MaterialsPage';
import Navigation from '../Navigation/NavBar';
import './AdminPage.css';
import {Outlet} from "react-router-dom";


const AdminPage = () => {

    const [activeItem, setActiveItem] = useState('profile'); // начальное состояние

    const handleItemClick = (name) => {
        setActiveItem(name); // обновление состояния
    };

    const renderContent = () => {
        switch (activeItem) {
            case 'profile':
                return <ProfileContent />;
            case 'groups':
                return <GroupsContent />;
            case 'materials':
                return <MaterialsContent />;
            default:
                return <ProfileContent />;
        }
    };

    return (
        <div className="admin-page">
            <Navigation activeItem={activeItem} handleItemClick={handleItemClick} />
            <div className="main-content">
                <Outlet/>
                {renderContent()}
            </div>
        </div>
    );
}

export default AdminPage;


